<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 自己练习 </title>
</head>
<body>
    <div id="app">
        <p v-if="a1"> 表白成功 </p>
        <p v-else> 表白失败 </p>

        <hr/>

        <p v-show="a2"> 求婚成功 </p>
        <p v-show="!a2"> 求婚失败 </p>

        <button @click="myLink">
            点击切换
        </button>
    </div>
</body>
</html>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el:"#app",
        data:{
            a1:true,
            a2:true, // true,false
        },
        methods:{
                myLink:function (){
                    this.a1 = !this.a1
                    this.a2 = !this.a2
                }
        }

    })
</script>